<template>
  <a-dropdown>
    <div class="user-info">
      <a-avatar :src="userInfo.avatar" class="user-avatar" style="background-color: #ccc">
        
      </a-avatar>
      <span class="user-name">{{ userInfo.userName }}</span>
      <CaretDownOutlined />
    </div>

    <template #overlay>
      <a-menu>
        <a-menu-item @click="openModel">
          <span>修改密码</span>
        </a-menu-item>
        <a-menu-item @click="logout">
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <ChangePsd v-model="modelOpen" />
</template>

<script lang="ts" setup>
import { createVNode, ref } from 'vue'
import { QuestionCircleOutlined, CaretDownOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { loadingPromise } from '@/utils/tools'
import ChangePsd from './changePsd.vue'
import { useSystemStore } from '@/store/system'
import { storeToRefs } from 'pinia'

const {userInfo} = storeToRefs(useSystemStore()
) 
const router = useRouter()

const modelOpen = ref(false)

const openModel = () => {
  modelOpen.value = true
}

const logout = () => {
  Modal.confirm({
    title: '退出当前账号？',
    icon: createVNode(QuestionCircleOutlined),
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await loadingPromise()
      router.push({
        path: '/login'
      })
    }
  })
}
</script>

<style lang="less" scoped>
.user-info {
  display: flex;
  align-items: center;

  .user-avatar {
    margin-right: 6px;
  }

  .user-name {
    font-size: 14px;
  }
}
</style>
